
Ext.ux.Image = Ext.extend(Ext.BoxComponent, {
	tooltipType : 'qtip',
	
	initComponent : function() {
		Ext.ux.Image.superclass.initComponent.apply(this, arguments);
		this.addEvents('load');
	},
	
	onRender : function() {
		var _this = this;
		this.autoEl = {
			cn : {
				tag : 'img',
				src : this.src
			}
		}
		Ext.ux.Image.superclass.onRender.apply(this, arguments);
		this.positionEl = this.el;
		this.el = this.resizeEl = Ext
				.get(this.positionEl.dom.firstChild);
		this.el.on('load', this.onLoad, this);
		this.el.on('dblclick',function(){
  		 var win=Ext.getCmp('image_popup_window');
  		 win.close();
  		 _this.clearTip();
		});
		//设置提示信息
		if(this.tooltip){
            this.setTooltip(this.tooltip, true);
        }
	},

	onResize : function() {
		this.positionEl.setSize(this.getSize());
	},

	onLoad : function() {
		if (this.autoSize) {
			this.syncSize();
		}
		if (this.resizable && !this.resizer) {
			this.resizer = new Ext.Resizable(this.positionEl, {
                    minWidth:60,
                    minHeight: 60,
					preserveRatio : true,
					handles : 'all',
					draggable : false,
					dynamic : true,
					resizeChild : true
				});
		}
		
		this.fireEvent('load', this);
	},
	show:function(){
		this.resizer.show();
	}
	,
 /**
 * Sets the tooltip for this Component.
 * @param {String/Object} tooltip. This may be:
 * String : A string to be used as innerHTML (html tags are accepted) to show in a tooltip
 * Object : A configuration object for {@link Ext.QuickTips#register}.
 * @return {Ext.ux.Image} this
 */
    setTooltip : function(tooltip, /* private */ initial){
        if(this.rendered){
            if(!initial){
                this.clearTip();
            }
            if(Ext.isObject(tooltip)){
                Ext.QuickTips.register(Ext.apply({
                      target: this.el.id  //this.btnEl.id
                }, tooltip));
                this.tooltip = tooltip;
            }else{
                this.el.dom[this.tooltipType] = tooltip;
            }
        }else{
            this.tooltip = tooltip;
        }
        return this;
    },

    // private
    clearTip : function(){
        if(Ext.isObject(this.tooltip)){
            Ext.QuickTips.unregister(this);
        }
    }	

});


Ext.namespace('VAS');
VAS.ImageFileUpload = Ext.extend(Ext.form.CompositeField, {
	initComponent : function() {
		var _this = this;
		var config = {

			name : 'imagePreviewUpload',
			items : [{
				xtype : 'fileuploadfield',
				fieldLabel : _this.fieldLabel,
				name : _this.name,
				width : 125

			}, {
				xtype : 'button',
				icon : 'lib/vas/img/menuIcon/page_white_camera.png',
				width : 16,
				handler : function() {
					var url = _this.items.itemAt(0).getValue();								
					if (url != '') {
						var win = new Ext.Window({
							manager:wgroup,
					       id:'image_popup_window',
							height : 60,
							width : 60,
							modal : true,
							closable:false,
							frame : false,
							draggable : true,
							boder:false,
							layout : 'fit',
							items : new Ext.ux.Image({
								src : url,
								autoSize : true,
								resizable : true
								,tooltip: '双击关闭'
							})
						})
						win.show();
					}
				}
			}]
		};
		Ext.apply(this, config);
		Ext.apply(this.initialConfig, config);
		VAS.ImageFileUpload.superclass.initComponent.apply(this,
				arguments);
	}
});

Ext.reg('imagePreviewUpload', VAS.ImageFileUpload);

